<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DragSelect - Demo</title>
<script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="ds.min.js"></script>
<style>
* {padding:0; margin:0;}
.margin {width:1000px; margin:100px auto 0;}
.tip {text-align:center; font-size:16px; padding-bottom:10px; line-height:22px;}
.ul:after {content:""; display:block; clear:both;}
.ul {background-color:#ccc; padding:40px 35px 0; user-select:none;}
.li {width:25%; float:left; margin-bottom:40px;}
.li .mar {margin:0 20px; height:120px; background-color:#ddd; position:relative;}
.li .mar.on {background-color:#4892db;}
.li .mar input[type="checkbox"] {visibility:hidden;}
.checkbox {width:18px; height:18px; border:2px solid #13b8cb; background-color:#fff; position:absolute; top:3px; left:3px;}
.checkbox:before, .checkbox:after {content:''; display:block; background-color:#fff; height:2px; position:absolute;}
.checkbox:before {width:7px; top:10px; left:2px; transform:rotate(45deg);}
.checkbox:after {width:12px; top:8px; left:5px; transform:rotate(-45deg);}
.li .mar.on .checkbox {background-color:#13b8cb;}
.li .mar.on .checkbox:after, .li .mar.on .checkbox:before {background-color:#fff;}
</style>
</head>

<body>

<div class="margin">
  <div class="tip"><p>提示：</p><p>1.在灰色区域内拖动选择，也可以点击选择</p><p>2.主区域最好添加css 属性 user-select:none 取消文本选择，防止选择事件冲突</p></div>
  <div id="ul" class="ul">
    <div class="li"><div class="mar mar1"><span class="checkbox"></span><input type="checkbox" /></div></div>
    <div class="li"><div class="mar mar2"><span class="checkbox"></span><input type="checkbox" /></div></div>
    <div class="li"><div class="mar mar3"><span class="checkbox"></span><input type="checkbox" /></div></div>
    <div class="li"><div class="mar mar4"><span class="checkbox"></span><input type="checkbox" /></div></div>
    <div class="li"><div class="mar mar5"><span class="checkbox"></span><input type="checkbox" /></div></div>
    <div class="li"><div class="mar mar6"><span class="checkbox"></span><input type="checkbox" /></div></div>
    <div class="li"><div class="mar mar7"><span class="checkbox"></span><input type="checkbox" /></div></div>
    <div class="li"><div class="mar mar8"><span class="checkbox"></span><input type="checkbox" /></div></div>
  </div>
  <button class="">全选</button> <button>全不选</button> <button>反选</button>
</div>

<script>
var ds = new DragSelect({
  area: document.getElementById('ul'),
  selectables: document.getElementsByClassName('mar'),
  multiSelectMode: true,
  //选中
  onElementSelect: function(element){
    $(element).addClass('on').find('input[type="checkbox"]').prop('checked', true);
  },
  //取消选中
  onElementUnselect: function(element){
    $(element).removeClass('on').find('input[type="checkbox"]').prop('checked', false);
  },
  //鼠标抬起后返回所有选中的元素
  callback: function(elements) {
    console.log(elements)
  },
});

$(function(){
  //区域内的所有可选元素
  var selects = ds.selectables;

  //全选
  $('button:eq(0)').click(function(){
    ds.setSelection(selects);
  });

  //全不选
  $('button:eq(1)').click(function(){
    ds.clearSelection();
  });

  //反选
  $('button:eq(2)').click(function(){
    ds.toggleSelection(selects);
  });
});
</script>

</body>
</html>